<template>
  <el-container @mousemove="handleMouseMove" @mouseup="handleMouseUp">
    <el-container>
      <el-header style="margin: 20px 0 12px 0;">
        <el-row>
          <el-col :span="18" style="text-align: left;">
            <div style="display: flex; align-items: center;">
              <svg t="1703391958911" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="4296" width="32" height="32">
                <path
                  d="M581.290667 0a42.666667 42.666667 0 0 1 28.117333 10.538667l314.709333 275.370666a42.666667 42.666667 0 0 1 14.549334 32.128V896a128 128 0 0 1-120.490667 127.786667L810.666667 1024H213.333333a128 128 0 0 1-127.786666-120.490667L85.333333 896V128A128 128 0 0 1 205.824 0.213333L213.333333 0h367.957334zM512 85.333333H213.333333a42.666667 42.666667 0 0 0-42.368 37.674667L170.666667 128v768a42.666667 42.666667 0 0 0 37.674666 42.368L213.333333 938.666667h597.333334a42.666667 42.666667 0 0 0 42.368-37.674667L853.333333 896V384h-213.333333a128 128 0 0 1-127.146667-113.066667l-0.64-7.424L512 256V85.333333z m178.901333 384.170667v59.733333h-139.818666v366.933334H481.152v-366.933334H341.333333v-59.733333h349.568zM597.333333 103.808V256a42.666667 42.666667 0 0 0 37.674667 42.368L640 298.666667h167.338667L597.333333 103.808z"
                  fill="#008df0" p-id="4297"></path>
              </svg>
              <strong>&nbsp;{{ fileObj.filename }}</strong>
            </div>

          </el-col>
          <el-col :span="6" style="text-align: right;">
            <el-button type="success" plain v-if="data.state == 'readonly'" @click="data.state = statement.write">
              <el-icon>
                <Edit />
              </el-icon>
              <strong> 编辑文稿</strong>
            </el-button>
            <el-button type="success" plain v-else-if="data.state == 'write'" @click="data.state = statement.readonly">
              <el-icon>
                <Back />
              </el-icon>
              <strong> 退出编辑</strong>
            </el-button>
            <el-button type="warning" plain v-else-if="data.state == 'locked'" @click="handleunLock">
              <el-icon>
                <Lock />
              </el-icon>
              <strong> 解锁</strong>
            </el-button>

          </el-col>
        </el-row>
        <el-row class="edit_tools" style="overflow: hidden;">
          <el-col :span="24" style="text-align: center;  min-width: 900px;">
            <el-button text>
              <svg t="1703407290785" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="49083" width="22" height="22">
                <path
                  d="M543.775049 526.238177l-83.194956-201.139806a44.797284 44.797284 0 0 1-2.943822-4.543725 45.885218 45.885218 0 0 0-5.119689-7.551542 26.302405 26.302405 0 0 0-7.295558-5.311678c-1.471911-0.767953-2.943822-2.239864-4.415732-3.007817a30.142173 30.142173 0 0 0-8.063511-1.535907c-2.175868 0-3.647779-1.535907-5.823647-1.535907h-4.031756a22.654627 22.654627 0 0 0-10.239379 2.239864c-1.471911 0-2.175868 1.535907-3.647779 3.007818a26.302405 26.302405 0 0 0-7.295558 5.311678 41.469486 41.469486 0 0 0-5.119689 6.783588c-0.703957 1.535907-2.175868 3.007818-2.943822 4.543725L307.693362 531.613851l-51.900854 124.024481a38.781649 38.781649 0 0 0 2.879826 35.965819 36.093812 36.093812 0 0 0 30.782133 16.958972 36.541785 36.541785 0 0 0 33.597963-22.654626l42.365432-101.305859h124.984423l42.365431 101.305859a37.181746 37.181746 0 0 0 20.158778 20.222774 35.453851 35.453851 0 0 0 28.094297-0.575965 38.397672 38.397672 0 0 0 19.198836-49.916974l-48.253074-116.472939a35.069874 35.069874 0 0 0-5.823647-14.399127z m-148.407003-15.871038l30.718138-74.107507 30.718138 74.107507h-61.37228z m244.145199-177.717226v346.155014a36.541785 36.541785 0 1 0 73.083569 0V332.457925a36.541785 36.541785 0 1 0-73.083569 0z"
                  fill="#4C84FF" p-id="49084"></path>
                <path
                  d="M168.565796 463.521979a81.467061 81.467061 0 0 0-45.437245-71.995635V312.299147a33.14999 33.14999 0 0 1 17.15096-29.054239l353.002599-199.219922a35.773831 35.773831 0 0 1 34.237925 0l354.47451 199.92388a33.14999 33.14999 0 0 1 17.15096 29.054238v69.051814a40.381552 40.381552 0 0 0 40.957517 39.997575 39.933579 39.933579 0 0 0 40.957517-39.997575V313.003104a112.761164 112.761164 0 0 0-57.596508-97.402095L567.51761 14.205219a123.064539 123.064539 0 0 0-114.681048 0L99.321994 215.08904a112.121203 112.121203 0 0 0-57.596508 97.402095V394.278177a80.443123 80.443123 0 0 0-41.72547 69.051814 84.154898 84.154898 0 0 0 168.309796 0zM1024.193924 587.802444a84.154898 84.154898 0 0 0-168.309796 0 80.123143 80.123143 0 0 0 43.965334 70.395733v53.820737a32.894006 32.894006 0 0 1-17.15096 28.350281L528.223992 940.421067a34.365917 34.365917 0 0 1-33.533967 0L140.279511 740.497187a32.894006 32.894006 0 0 1-17.15096-28.350281v-60.348341a40.381552 40.381552 0 0 0-40.957517-39.997575 39.933579 39.933579 0 0 0-40.957517 39.997575v60.348341a113.401125 113.401125 0 0 0 57.596508 96.698138l354.218526 199.795887a115.193016 115.193016 0 0 0 114.681047 0l354.47451-199.923879a111.865218 111.865218 0 0 0 57.596508-96.698138v-53.820737a81.531057 81.531057 0 0 0 43.965335-70.395733z"
                  fill="#4C84FF" p-id="49085"></path>
              </svg>
              <span>&nbsp; AI智能审</span>
            </el-button>
            <el-divider direction="vertical" />
            <el-button text>
              <el-tooltip content="保存(Ctrl+S)" placement="bottom" effect="light"><span> 保存</span></el-tooltip>
            </el-button>
            <el-button text>
              <el-tooltip content="撤销(Ctrl+Z)" placement="bottom" effect="light">
                <svg t="1703394195555" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="26525" width="22" height="22">
                  <path
                    d="M596.16 284.064H258.56l101.376-101.44a31.968 31.968 0 1 0-45.248-45.216L178.56 273.504c-11.904 11.872-18.496 27.84-18.56 44.8a63.04 63.04 0 0 0 18.56 45.28l136.128 136.16a31.904 31.904 0 0 0 45.248 0 31.968 31.968 0 0 0 0-45.248l-106.752-106.496H596.16c114.88 0 208.32 93.312 208.32 208s-93.44 208-208.32 208h-223.36a32 32 0 0 0 0 64h223.36c150.144 0 272.32-122.016 272.32-272 0-149.984-122.176-272-272.32-272"
                    fill="#707070" p-id="26526"></path>
                </svg>
              </el-tooltip>
            </el-button>
            <el-button text>
              <el-tooltip content="重做(Ctrl+Y)" placement="bottom" effect="light">
                <svg t="1703394154826" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="25395" width="22" height="22">
                  <path
                    d="M829.568 364.224a31.744 31.744 0 0 0-6.976-34.88l-191.936-192a32 32 0 0 0-45.248 45.248L722.752 320H384C242.816 320 128 434.816 128 576s114.816 256 256 256h160a32 32 0 0 0 0-64H384c-105.856 0-192-86.144-192-192s86.144-192 192-192h338.752L585.344 521.344a32 32 0 0 0 45.312 45.312l191.936-191.936a34.176 34.176 0 0 0 6.976-10.496z"
                    fill="#707070" p-id="25396"></path>
                </svg>
              </el-tooltip>
            </el-button>
            <el-divider direction="vertical" />
            <el-select v-model="t_value" class="m-2" placeholder="正文" :width="20" style="width: 85px;">
              <el-option v-for="item in titleoptions" :key="item.t_value" :label="item.t_label" :value="item.t_value" />
            </el-select>
            <el-select v-model="f_value" class="m-2" placeholder="宋体" :width="20" style="width: 72px;">
              <el-option v-for="item in fontoptions" :key="item.f_value" :label="item.f_label" :value="item.f_value" />
            </el-select>
            <el-select v-model="fs_value" class="m-2" placeholder="22" :width="20" style="width: 60px;">
              <el-option v-for="item in fsoptions" :key="item.fs_value" :label="item.fs_label" :value="item.fs_value" />
            </el-select>
            <el-divider direction="vertical" />
            <!-- <el-button-group>
                      <el-button text>Previous Page</el-button>
                      <el-button text>
                          nets
                      </el-button>
                  </el-button-group> -->
            <el-button text>
              <el-tooltip content="加粗(Ctrl+B)" placement="bottom" effect="light">
                <svg t="1703399777908" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="27599" width="18" height="18">
                  <path
                    d="M362.976 804.704h141.12c79.616 0 135.776-10.24 168.384-30.784 32.64-20.48 48.96-54.496 48.96-101.984 0-47.904-15.584-82.016-46.72-102.304-31.168-20.288-85.92-30.432-164.288-30.432h-147.456v265.504z m0-345.152h132.832c60.16 0 104.768-9.728 133.76-29.12 29.056-19.456 43.552-49.44 43.552-90.048 0-38.4-13.12-67.872-39.392-88.384-26.272-20.48-64-30.752-113.12-30.752h-157.632v238.304zM545.376 896H236.48c-14.816 0-25.92-3.872-33.344-11.648-7.424-7.776-11.136-19.424-11.136-34.976 0-17.28 15.04-44.672 50.24-44.672h20.96V221.248H242.24c-32.64 0-46.4-28.928-46.4-46.624 0-15.104 3.776-26.656 11.424-34.656 7.616-8 18.624-11.968 33.024-11.968h266.336c89.824 0 158.24 17.792 205.248 53.44 47.04 35.584 70.56 87.296 70.56 155.072 0 34.112-7.2 63.904-21.6 89.376-14.4 25.472-35.84 46.4-64.192 62.816 45.76 16.832 79.744 40.32 101.984 70.56 22.24 30.24 33.376 68.64 33.376 115.264 0 39.296-9.536 75.136-28.608 107.52-19.072 32.352-45.952 58.88-80.704 79.616a232.64 232.64 0 0 1-69.28 26.24c-25.408 5.408-61.44 8.096-108.032 8.096z"
                    fill="#707070" p-id="27600"></path>
                </svg>
              </el-tooltip>
            </el-button>
            <el-button text>
              <el-tooltip content="斜体(Ctrl+I)" placement="bottom" effect="light">
                <svg t="1703399923277" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="29500" width="20" height="20">
                  <path d="M768 128l0 64-128 0-192 576 128 0 0 64L192 832l0-64 128 0 192-576L384 192 384 128 768 128z"
                    fill="#707070" p-id="29501"></path>
                </svg>
              </el-tooltip>
            </el-button>
            <el-button text>
              <el-tooltip content="下划线(Ctrl+U)" placement="bottom" effect="light">
                <el-button text>
                  <el-tooltip content="加粗(Ctrl+B)" placement="bottom" effect="light">
                    <svg t="1703400032831" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="30522" width="18" height="18">
                      <path
                        d="M512 811.296a312 312 0 0 0 312-312V89.6h-112v409.696a200 200 0 1 1-400 0V89.6h-112v409.696a312 312 0 0 0 312 312zM864 885.792H160a32 32 0 0 0 0 64h704a32 32 0 0 0 0-64z"
                        p-id="30523" fill="#707070"></path>
                    </svg>
                  </el-tooltip>
                </el-button>
              </el-tooltip>
            </el-button>
            <el-button text>
              <el-tooltip content="删除线(Ctrl+5)" placement="bottom" effect="light">
                <svg t="1703400207463" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="33325" width="16" height="16">
                  <path
                    d="M272.091429 363.227429a357.741714 357.741714 0 0 1-5.851429-67.584c0-25.819429 5.851429-55.588571 17.773714-83.382858 11.849143-29.915429 29.696-57.709714 55.369143-81.554285 23.771429-23.844571 57.417143-45.714286 95.085714-61.659429A369.664 369.664 0 0 1 574.902857 43.227429c49.517714 0 97.060571 5.997714 142.628572 19.894857 35.547429 11.922286 69.193143 31.817143 98.889142 59.611428a29.696 29.696 0 0 1-1.974857 43.739429l-53.394285 49.737143c-11.922286 9.874286-29.769143 11.849143-41.618286 0a213.138286 213.138286 0 0 0-47.542857-35.84 211.675429 211.675429 0 0 0-96.914286-21.869715c-33.645714 0-63.341714 4.022857-85.138286 13.897143-21.796571 9.947429-41.545143 19.894857-55.442285 35.84-13.897143 15.872-23.698286 29.769143-29.696 45.714286a128.292571 128.292571 0 0 0-7.899429 43.739429c0 21.869714 3.949714 39.716571 9.874286 55.588571a19.602286 19.602286 0 0 1-17.773715 27.867429H291.84c-9.874286 0-17.846857-9.947429-19.748571-17.92z m550.253714 296.228571H723.382857c-13.897143 0-23.698286 13.897143-17.773714 25.819429 5.851429 11.922286 7.899429 27.794286 7.899428 43.739428 0 23.844571-5.924571 45.714286-15.872 65.609143a166.985143 166.985143 0 0 1-43.52 47.689143 203.776 203.776 0 0 1-59.392 27.794286 233.691429 233.691429 0 0 1-63.341714 9.947428 247.076571 247.076571 0 0 1-106.861714-23.844571 204.580571 204.580571 0 0 1-67.291429-49.737143 30.573714 30.573714 0 0 0-41.545143-3.949714l-55.442285 47.762285a28.891429 28.891429 0 0 0-1.974857 41.691429c27.721143 31.817143 63.341714 55.661714 104.886857 71.606857a457.508571 457.508571 0 0 0 166.253714 29.769143c43.593143 0 85.138286-5.924571 122.733714-19.821714a313.051429 313.051429 0 0 0 100.937143-55.661715 253.805714 253.805714 0 0 0 67.291429-89.453714c15.872-35.84 25.746286-73.581714 25.746285-117.321143 0-15.872 0-25.819429-1.974857-39.716571-3.949714-4.022857-11.849143-11.922286-21.796571-11.922286z m197.924571-180.882286c-3.949714-11.922286-15.798857-17.92-27.648-17.92H101.888c-13.897143 0-23.771429 5.997714-27.721143 17.92-1.974857 3.949714-1.974857 5.924571-1.974857 9.947429v59.611428c0 15.872 13.897143 31.817143 29.696 31.817143h890.733714c15.798857 0 29.622857-15.945143 29.622857-31.817143v-59.611428c0-4.022857 0-5.997714-1.974857-9.947429z"
                    fill="#707070" p-id="33326"></path>
                </svg>
              </el-tooltip>
            </el-button>
            <el-divider direction="vertical" />

            <el-popover placement="bottom" title="" trigger="hover">
              <template #default>
                <ColorPlane></ColorPlane>
              </template>
              <template #reference>
                <el-button text>
                  <el-tooltip content="字体颜色" placement="top" effect="light">
                    <svg t="1703400562471" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="34439" width="22" height="22">
                      <path
                        d="M470.975 137l-214.462 562.5h102l44.513-131.25h217.949l48.038 131.25h102.002l-214.501-562.5h-85.5zM512 256.55l78.525 233.175h-160.538l82.013-233.212zM212 774.5v112.5h599.999v-112.5h-599.999z"
                        p-id="34440" fill="#707070"></path>
                    </svg>
                  </el-tooltip>
                </el-button>
              </template>
            </el-popover>
            <el-popover placement="bottom" title="" trigger="hover">
              <template #default>
                <ColorPlane></ColorPlane>
              </template>
              <template #reference>
                <el-button text>
                  <el-tooltip content="背景填充色" placement="top" effect="light">
                    <svg t="1703400677969" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="41007" width="18" height="18">
                      <path
                        d="M503.6 704l304.7-304.4L536 127.7V64H306v231L145.7 455 395 704H64v256h896V704H503.6zM370 128h102v1.2L370 231V128z m102 91.6V400h64V218.1l181.7 181.5-268.4 268.2-213-212.8L472 219.6zM896 896H128V768h768v128z"
                        fill="#707070" p-id="41008"></path>
                      <path d="M755 362c76.2 0 138 59.1 138 132s-61.8 132-138 132" fill="#707070" p-id="41009">
                      </path>
                    </svg>
                  </el-tooltip>
                </el-button>
              </template>
            </el-popover>
            <el-button text>
              <el-tooltip content="左对齐" placement="bottom" effect="light">
                <svg t="1703400823770" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="42919" width="20" height="20">
                  <path d="M96 128h832v96H96zM96 576h832v96H96zM96 352h576v96H96zM96 800h576v96H96z" p-id="42920"
                    fill="#707070"></path>
                </svg>
              </el-tooltip>
            </el-button>
            <el-button text>
              <el-tooltip content="左右对齐" placement="bottom" effect="light">
                <svg t="1703401109649" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="43323" width="20" height="20">
                  <path d="M96 128h832v96H96zM96 576h832v96H96zM96 352h832v96H96zM96 800h832v96H96z" p-id="43324"
                    fill="#707070"></path>
                </svg>
              </el-tooltip>
            </el-button>
            <el-button text>
              <el-tooltip content="右对齐" placement="bottom" effect="light">
                <svg t="1703401025936" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="43121" width="20" height="20">
                  <path d="M96 128h832v96H96zM96 576h832v96H96zM352 352h576v96H352zM352 800h576v96H352z" p-id="43122"
                    fill="#707070"></path>
                </svg>
              </el-tooltip>
            </el-button>
            <el-divider direction="vertical" />
            <el-button text>
              <el-tooltip content="全屏(F11)" placement="bottom" effect="light">
                <el-icon size="large">
                  <FullScreen />
                </el-icon>
              </el-tooltip>
            </el-button>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-watermark :content="watermarkContent" style="height: 100%;">
          <div style="height: 100%;">
            <el-input type="textarea" v-model="textarea" autofocus :readonly="data.readonly" :autosize="{ minRows: 26 }"
              placeholder="请输入新闻稿文字……" :value="fileObj.txtContent" />
          </div>
        </el-watermark>
      </el-main>
      <el-footer
        style="box-shadow: 0 -2px 8px -1px hsla(0, 0%, 89%, 0.9); display: flex; align-items: center; align-content: center;">
        <div style="width: 100%; overflow: hidden;">
          <el-row style="overflow: hidden; min-width: 777px;">
            <el-col :span="12" style="text-align: left;  min-width:360px">
              <el-tooltip content="分享" placement="top" effect="dark">
                <el-button text size="large">
                  <svg t="1703409207358" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="54952" width="32" height="32">
                    <path
                      d="M614.4 102.4a153.6 153.6 0 1 0 0 307.2 153.6 153.6 0 0 0 0-307.2z m0 68.266667a85.333333 85.333333 0 1 1 0 170.666666 85.333333 85.333333 0 0 1 0-170.666666zM819.2 614.4a153.6 153.6 0 1 0 0 307.2 153.6 153.6 0 0 0 0-307.2z m0 68.266667a85.333333 85.333333 0 1 1 0 170.666666 85.333333 85.333333 0 0 1 0-170.666666z"
                      fill="#444444" p-id="54953"></path>
                    <path
                      d="M505.9072 316.245333a34.133333 34.133333 0 0 1 48.384 48.0768l-2.065067 2.0992-221.866666 204.8a34.133333 34.133333 0 0 1-48.384-48.0768l2.065066-2.0992 221.866667-204.8zM325.290667 674.389333a34.133333 34.133333 0 0 1 38.894933-25.361066l2.491733 0.512 341.333334 85.333333a34.133333 34.133333 0 0 1-14.062934 66.7648l-2.491733-0.512-341.333333-85.333333a34.133333 34.133333 0 0 1-24.832-41.403734z"
                      fill="#444444" p-id="54954"></path>
                    <path
                      d="M238.933333 494.933333a153.6 153.6 0 1 0 0 307.2 153.6 153.6 0 0 0 0-307.2z m0 68.266667a85.333333 85.333333 0 1 1 0 170.666667 85.333333 85.333333 0 0 1 0-170.666667z"
                      fill="#00B386" p-id="54955"></path>
                  </svg>
                </el-button>
              </el-tooltip>
              <el-tooltip content="收藏" placement="top" effect="dark">
                <el-button text size="large">
                  <svg t="1703488493182" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="13999" width="32" height="32">
                    <path
                      d="M908.8 214.4c-9.6-12.8-19.2-22.4-28.8-32-112-115.2-230.4-105.6-342.4-16-9.6 6.4-19.2 16-28.8 25.6-9.6-9.6-19.2-16-28.8-25.6-112-86.4-230.4-99.2-342.4 16-9.6 9.6-19.2 19.2-25.6 32-134.4 195.2-60.8 387.2 137.6 560 44.8 38.4 89.6 73.6 137.6 102.4 16 9.6 32 19.2 44.8 28.8 9.6 6.4 12.8 9.6 19.2 9.6 3.2 3.2 6.4 3.2 12.8 6.4 3.2 3.2 9.6 3.2 16 6.4 25.6 6.4 64 3.2 89.6-12.8 3.2 0 9.6-3.2 16-9.6 12.8-6.4 28.8-16 44.8-28.8 48-28.8 92.8-64 137.6-102.4C969.6 598.4 1043.2 406.4 908.8 214.4zM736 732.8c-41.6 35.2-86.4 70.4-131.2 99.2-16 9.6-28.8 19.2-44.8 25.6-6.4 3.2-12.8 6.4-16 9.6-6.4 3.2-16 6.4-25.6 9.6-3.2 0-6.4 0-9.6 0-6.4 0-12.8 0-16 0-3.2 0-3.2 0-3.2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0-3.2 0-3.2-3.2-3.2 0-6.4-3.2-9.6-3.2-3.2-3.2-9.6-6.4-16-9.6-12.8-6.4-28.8-16-44.8-25.6-44.8-28.8-89.6-60.8-131.2-99.2-179.2-160-243.2-323.2-131.2-489.6 6.4-9.6 16-16 22.4-25.6 89.6-96 182.4-86.4 275.2-12.8 9.6 6.4 16 12.8 22.4 19.2 0 0 0 0 0 0l28.8 32c3.2 3.2 3.2 3.2 6.4 6.4 0 0 0 0 0 0l0 0c3.2-3.2 9.6-9.6 16-16 12.8-12.8 25.6-25.6 41.6-38.4 92.8-73.6 185.6-83.2 275.2 12.8 6.4 9.6 16 16 22.4 25.6C982.4 406.4 918.4 572.8 736 732.8z"
                      p-id="14000" fill="#707070"></path>
                  </svg>
                </el-button>
              </el-tooltip>
              <el-tooltip content="全屏查看(F11)" placement="top" effect="dark">
                <el-button text size="large">
                  <svg t="1703408760775" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="51738" width="22" height="22">
                    <path
                      d="M919.920093 725.414549q3.014188 26.122962 7.033105 58.776664t7.53547 66.814498 7.53547 67.819227 7.033105 60.786122q6.028376 47.222277-41.193901 44.208089-25.118232-2.009459-56.767205-5.526011t-64.805039-7.53547-65.809769-8.037834-59.781393-7.033105q-29.137149-3.014188-37.174984-16.578033t9.042564-30.644243q11.052022-10.047293 27.127691-27.630056t27.127691-28.634785q11.052022-12.056752 7.033105-22.104044t-16.075669-23.108774q-28.13242-27.127691-51.241194-49.231735t-51.241194-51.241194q-6.028376-6.028376-12.056752-13.061481t-9.042564-15.573304-1.004729-18.085127 13.061481-20.59695q6.028376-6.028376 10.047293-10.549658t8.037834-8.037834 8.540199-8.037834 11.554387-12.559116q20.094586-20.094586 37.174984-17.080398t37.174984 23.108774 41.193901 40.691536 47.222277 46.719912q19.089857 18.085127 32.653702 25.118232t26.625326-6.028376q9.042564-9.042564 22.606409-21.60168t23.611138-22.606409q17.080398-17.080398 30.644243-13.061481t16.578033 30.141879zM43.79615 383.80659q-3.014188-26.122962-7.033105-58.776664t-7.53547-66.814498-7.53547-67.819227-7.033105-60.786122q-3.014188-26.122962 6.53074-36.170255t33.658431-8.037834q25.118232 2.009459 56.767205 5.526011t64.805039 7.53547 65.809769 8.037834 59.781393 7.033105q30.141879 3.014188 37.677348 16.578033t-9.544928 30.644243q-10.047293 10.047293-24.615868 26.122962t-25.620597 27.127691q-12.056752 12.056752-8.037834 22.104044t17.080398 23.108774q13.061481 14.06621 24.615868 24.615868t22.606409 21.099315 23.108774 22.606409l25.118232 25.118232q6.028376 6.028376 11.554387 14.06621t8.037834 17.080398-0.502365 19.089857-13.061481 20.094586l-11.052022 11.052022q-4.018917 4.018917-7.53547 8.037834t-8.540199 8.037834l-11.052022 12.056752q-20.094586 20.094586-34.663161 15.070939t-34.663161-25.118232-38.179713-37.677348-44.208089-43.705724q-18.085127-18.085127-32.151337-25.118232t-27.127691 6.028376q-9.042564 10.047293-25.118232 24.615868t-26.122962 24.615868q-17.080398 17.080398-30.141879 13.061481t-16.075669-30.141879zM905.853883 84.397261q26.122962-3.014188 36.170255 6.53074t8.037834 34.663161-5.526011 56.767205-7.53547 64.805039-8.037834 65.809769-7.033105 59.781393q-3.014188 29.137149-16.578033 37.174984t-30.644243-10.047293q-10.047293-10.047293-26.122962-24.615868t-27.127691-25.620597q-12.056752-11.052022-22.104044-7.53547t-23.108774 16.578033q-27.127691 27.127691-47.724641 49.231735t-48.729371 50.236465q-6.028376 6.028376-14.06621 11.554387t-17.080398 8.037834-19.089857-0.502365-20.094586-14.06621q-6.028376-6.028376-10.549658-10.047293t-8.540199-8.037834-8.540199-8.037834-11.554387-12.056752q-20.094586-20.094586-16.075669-35.165525t25.118232-35.165525l38.179713-40.189172q19.089857-20.094586 45.212818-46.217547 19.089857-18.085127 26.122962-32.151337t-7.033105-26.122962q-9.042564-9.042564-23.108774-24.615868t-24.113503-25.620597q-17.080398-17.080398-13.061481-30.141879t30.141879-16.075669 58.776664-7.033105 67.316863-7.53547 67.819227-7.53547 60.283758-7.033105zM350.238584 640.012559q6.028376 6.028376 10.549658 10.047293t8.540199 8.037834l8.037834 9.042564 12.056752 11.052022q20.094586 20.094586 17.582763 36.672619t-23.611138 37.677348q-19.089857 19.089857-40.189172 40.691536t-47.222277 47.724641q-18.085127 18.085127-22.606409 29.639514t8.540199 24.615868q10.047293 9.042564 22.606409 22.606409t22.606409 23.611138q17.080398 17.080398 12.559116 30.141879t-30.644243 16.075669-58.274299 7.033105-66.814498 8.037834-68.321592 8.037834-60.786122 7.033105q-25.118232 2.009459-35.66789-7.53547t-8.540199-33.658431q2.009459-25.118232 5.526011-56.767205t7.53547-64.805039 8.037834-65.809769 7.033105-59.781393q3.014188-30.141879 16.578033-37.677348t30.644243 9.544928q10.047293 10.047293 27.630056 26.122962t28.634785 27.127691q12.056752 12.056752 20.094586 10.549658t20.094586-14.568575q13.061481-13.061481 25.118232-25.620597t24.113503-24.615868 24.615868-25.118232 26.625326-27.127691q6.028376-6.028376 13.061481-12.056752t15.573304-9.042564 18.085127-0.502365 20.59695 13.563845z"
                      p-id="51739" fill="#707070"></path>
                  </svg>
                </el-button>
              </el-tooltip>
              <el-tooltip content="放大" placement="top" effect="dark">
                <el-button text size="large">
                  <svg t="1703408845090" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="51994" width="32" height="32">
                    <path
                      d="M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z"
                      p-id="51995" fill="#707070"></path>
                    <path
                      d="M625.792 448H512v-112a32 32 0 0 0-64 0V448h-112a32 32 0 0 0 0 64H448v112a32 32 0 1 0 64 0V512h113.792a32 32 0 1 0 0-64z"
                      p-id="51996" fill="#707070"></path>
                  </svg>
                </el-button>
              </el-tooltip>
              <el-tooltip content="缩小" placement="top" effect="dark">
                <el-button text size="large">
                  <svg t="1703408947126" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="53077" width="32" height="32">
                    <path
                      d="M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z"
                      p-id="53078" fill="#707070"></path>
                    <path d="M625.792 448H336a32 32 0 0 0 0 64h289.792a32 32 0 1 0 0-64z" p-id="53079" fill="#707070">
                    </path>
                  </svg>
                </el-button>
              </el-tooltip>
            </el-col>
            <el-col :span="12" style="text-align: right; min-width:360px">

              <el-button color="#24B990" plain size="large">
                <strong> 复制全文</strong>
              </el-button>
              <el-button color="#24B990" plain size="large">
                <strong> 单篇下载</strong>
              </el-button>
              <el-tooltip content="AI大语言模型智能审稿" placement="top" effect="dark">

                <el-button color="#24B990" size="large">
                  <span style="color: white; display: flex; align-items: center; align-content: center;">
                    <svg t="1703407290785" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="49083" width="27" height="27">
                      <path
                        d="M543.775049 526.238177l-83.194956-201.139806a44.797284 44.797284 0 0 1-2.943822-4.543725 45.885218 45.885218 0 0 0-5.119689-7.551542 26.302405 26.302405 0 0 0-7.295558-5.311678c-1.471911-0.767953-2.943822-2.239864-4.415732-3.007817a30.142173 30.142173 0 0 0-8.063511-1.535907c-2.175868 0-3.647779-1.535907-5.823647-1.535907h-4.031756a22.654627 22.654627 0 0 0-10.239379 2.239864c-1.471911 0-2.175868 1.535907-3.647779 3.007818a26.302405 26.302405 0 0 0-7.295558 5.311678 41.469486 41.469486 0 0 0-5.119689 6.783588c-0.703957 1.535907-2.175868 3.007818-2.943822 4.543725L307.693362 531.613851l-51.900854 124.024481a38.781649 38.781649 0 0 0 2.879826 35.965819 36.093812 36.093812 0 0 0 30.782133 16.958972 36.541785 36.541785 0 0 0 33.597963-22.654626l42.365432-101.305859h124.984423l42.365431 101.305859a37.181746 37.181746 0 0 0 20.158778 20.222774 35.453851 35.453851 0 0 0 28.094297-0.575965 38.397672 38.397672 0 0 0 19.198836-49.916974l-48.253074-116.472939a35.069874 35.069874 0 0 0-5.823647-14.399127z m-148.407003-15.871038l30.718138-74.107507 30.718138 74.107507h-61.37228z m244.145199-177.717226v346.155014a36.541785 36.541785 0 1 0 73.083569 0V332.457925a36.541785 36.541785 0 1 0-73.083569 0z"
                        fill="#ffffff" p-id="49084" data-spm-anchor-id="a313x.search_index.0.i49.b8c43a81JtaZso"
                        class="selected">
                      </path>
                      <path
                        d="M168.565796 463.521979a81.467061 81.467061 0 0 0-45.437245-71.995635V312.299147a33.14999 33.14999 0 0 1 17.15096-29.054239l353.002599-199.219922a35.773831 35.773831 0 0 1 34.237925 0l354.47451 199.92388a33.14999 33.14999 0 0 1 17.15096 29.054238v69.051814a40.381552 40.381552 0 0 0 40.957517 39.997575 39.933579 39.933579 0 0 0 40.957517-39.997575V313.003104a112.761164 112.761164 0 0 0-57.596508-97.402095L567.51761 14.205219a123.064539 123.064539 0 0 0-114.681048 0L99.321994 215.08904a112.121203 112.121203 0 0 0-57.596508 97.402095V394.278177a80.443123 80.443123 0 0 0-41.72547 69.051814 84.154898 84.154898 0 0 0 168.309796 0zM1024.193924 587.802444a84.154898 84.154898 0 0 0-168.309796 0 80.123143 80.123143 0 0 0 43.965334 70.395733v53.820737a32.894006 32.894006 0 0 1-17.15096 28.350281L528.223992 940.421067a34.365917 34.365917 0 0 1-33.533967 0L140.279511 740.497187a32.894006 32.894006 0 0 1-17.15096-28.350281v-60.348341a40.381552 40.381552 0 0 0-40.957517-39.997575 39.933579 39.933579 0 0 0-40.957517 39.997575v60.348341a113.401125 113.401125 0 0 0 57.596508 96.698138l354.218526 199.795887a115.193016 115.193016 0 0 0 114.681047 0l354.47451-199.923879a111.865218 111.865218 0 0 0 57.596508-96.698138v-53.820737a81.531057 81.531057 0 0 0 43.965335-70.395733z"
                        fill="#ffffff" p-id="49085" data-spm-anchor-id="a313x.search_index.0.i50.b8c43a81JtaZso"
                        class="selected">
                      </path>
                    </svg>
                    <strong>&nbsp; AI智能审稿</strong>
                  </span>
                </el-button>
              </el-tooltip>
            </el-col>

          </el-row>
        </div>
      </el-footer>

    </el-container>
    <div class="my-divider" @mousedown.self="handleMouseDown"></div>
    <el-aside :width="data.width">
      <el-container>
        <el-header style="padding: 0; ">
          <el-row style="background-color: #FAFDF7 ; height: 100%; box-shadow: 0 2px 6px hsla(0, 0%, 89%, 0.9);">
            <el-col style="display: flex; align-items: center; text-align: center;">
              <el-avatar shape="circle" fit="fill">
                <template #default>
                  <img src="../../assets/images/icon_AI.png" alt="AI智能审稿" />
                  <!-- 占位 -->
                  <span>百稿审AI助手</span>
                </template>
              </el-avatar>
              <span style="font-weight: bold;">百稿审AI助手</span>
            </el-col>

          </el-row>
        </el-header>
        <el-main style="padding:0;" class="ai_scope_main">
          <el-row style="height: 100%; padding: 0;">
            <el-col>
              <el-watermark :content="watermarkContent" style="height: 100%;">
                <div style="height: 100%;">
                  <!-- TODO: AI模型计算区域 -->
                  <TipCard v-for="tips in AItips" :tips="tips"></TipCard>

                </div>
              </el-watermark>
            </el-col>
          </el-row>
        </el-main>
        <el-footer
          style="box-shadow: rgba(227, 227, 227, 0.9) 0px -2px 8px -1px; background-color: #FAFDF7; display: flex; align-items: center; align-content: center;">
          <div style="width: 100%; min-width: 250px; overflow: hidden;">
            <!-- <el-row style="height: 15px;"></el-row> -->
            <el-row>
              <el-col style="text-align: right;">
                <el-button color="#24B990" plain size="large">
                  <strong> 复制建议</strong>
                </el-button>
                <el-button color="#e6a23c" size="large">
                  <span style="color: white">
                    <strong> 一键纠错</strong>
                  </span>
                </el-button>
              </el-col>

            </el-row>
          </div>
        </el-footer>
      </el-container>
    </el-aside>
  </el-container>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import axios from 'axios'
import { ref, reactive, h } from 'vue';
import fs from 'fs'
import ColorPlane from '../dialogs/ColorPlane.vue';
import TipCard from "../dialogs/TipCard.vue";
import { ElMessage } from 'element-plus'
// width of el-aside
const textarea = ref('');

const AItips = [
  {
    'type': 'Hi, 天地并况',
    'content': '欢迎使用百稿审，我是您的专属AI助手，基于飞浆ERNIE-Turbo大语言预训练模型匠心打造，可以帮助你快速审查新闻稿，目前可支持上传稿件哦~快来试一试吧！',
    "advice": ''
  },
  // {
  //     'type': '语法错误',  //建议类型
  //     'content': "“正在一片美丽的薰衣草地里散步，突然，他遇到了一对狐狸母女，狐狸妈妈亲切地对花斑猪说,送来的”缺少主语", //建议描述信息
  //     "advice": "添加主语'花斑猪'"  //修改建议
  // },
  // {
  //     'type': '存在敏感词',
  //     'content': "“狐狸妈妈亲切地对花斑猪说,送来的”存在敏感词“花斑”",
  //     "advice": "‘花斑猪’换成小猪花花"
  // },

]

const _width = 360;
const fileObj = reactive({
  id: 1,
  filename: '新建文本文稿',
  modifytime: '2023.12.13 16:00',
  filesize: '',
  islike: false,
  hasChildren: true,
  filetype: 'txt文本文件',
  txtContent: ''
});
enum statement {
  readonly = 'readonly',
  write = 'write',
  locked = 'locked',
  unlocked = 'unlocked'
}
const watermarkContent = [
  '🌏百稿审',
  'AI大语言模型',
  '智能稿件评审系统'
];

const data = reactive(
  {
    state: statement.locked,
    width: _width + 'px',
    mousedown: false,
    readonly: false,
  }
)
let x1, x2, cur_x = _width;
const handleMouseDown = (e) => {
  x1 = e.pageX;
  data.mousedown = true;
  console.log('x1:', x1);
}
const handleMouseMove = (e) => {
  x2 = e.pageX;
  if (data.mousedown) {
    data.width = cur_x + x1 - x2 + 'px';
  }

}

const handleMouseUp = (e) => {
  cur_x = cur_x + x1 - x2;
  data.mousedown = false;
}
const handleunLock = () => {
  ElMessage({
    message: h('p', null, [
      h('span', null, '项目功能测试中，暂不支持解锁文档。'),
      h('i', { style: 'color: teal' }, '谢谢您的参与！'),
    ]),
    type: 'warning'
  })
}
// onMounted(() => {
//   axios.get('http://localhost:5173/dist/assets/files/test01.txt')
//       .then((response) => {
//           fileObj.txtContent = response.data
//           // console.log(response)
//       });
// });

/**
* 读取文本文件，并显示内容
*/
// const loadTxtContent = (filePath) => {
//     // 创建一个新的xhr对象
//     let xhr;
//     if (window.XMLHttpRequest) {
//         xhr = new XMLHttpRequest()
//     } else {
//         // eslint-disable-next-line
//         xhr = new ActiveXObject('Microsoft.XMLHTTP')
//     }
//     const okStatus = document.location.protocol === 'file' ? 0 : 200
//     xhr.open('GET', filePath, false)
//     xhr.overrideMimeType('text/html;charset=utf-8')
//     xhr.send(null)
//     return xhr.status === okStatus ? xhr.responseText : null
// }
// data.txtContend = loadTxtContent('@/assets/files/test01.txt');

const t_value = ref('')
const f_value = ref('')
const fs_value = ref('')
const titleoptions = [
  {
    t_value: '正文',
    t_label: '正文'
  },
  {
    t_value: '标题',
    t_label: '标题'
  }, {
    t_value: '副标题',
    t_label: '副标题'
  }, {
    t_value: '标题一',
    t_label: '标题一'
  }, {
    t_value: '标题二',
    t_label: '标题二'
  }, {
    t_value: '标题三',
    t_label: '标题三'
  }, {
    t_value: '标题四',
    t_label: '标题四'
  }
]
const fontoptions = [
  {
    f_value: '黑体',
    f_label: '黑体'
  },
  {
    f_value: '宋体',
    f_label: '宋体'
  }, {
    f_value: '隶书',
    f_label: '隶书'
  }, {
    f_value: '楷体',
    f_label: '楷体'
  }, {
    f_value: 'Arial',
    f_label: 'Arial'
  }
]
const fsoptions = [
  {
    fs_value: 8,
    fs_label: 8
  }, {
    fs_value: 9,
    fs_label: 9
  }, {
    fs_value: 10,
    fs_label: 10
  },
  {
    fs_value: 11,
    fs_label: 11
  },
  {
    fs_value: 12,
    fs_label: 12
  }, {
    fs_value: 14,
    fs_label: 14
  }, {
    fs_value: 16,
    fs_label: 16
  }, {
    fs_value: 18,
    fs_label: 18
  }, {
    fs_value: 20,
    fs_label: 20
  }, {
    fs_value: 22,
    fs_label: 22
  }, {
    fs_value: 24,
    fs_label: 24
  }, {
    fs_value: 28,
    fs_label: 28
  }, {
    fs_value: 34,
    fs_label: 34
  }, {
    fs_value: 42,
    fs_label: 42
  }, {
    fs_value: 52,
    fs_label: 52
  }, {
    fs_value: 64,
    fs_label: 64
  }
]

// console.log(myDivider)

</script>

<style scoped>
.el-container {
  padding: none;
}

.el-main {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

.el-aside {
  max-width: 50%;
  min-width: 300px;
  background: linear-gradient(0deg, #b0fca9, #d0fecc, #f5fbf0, #fff);

}

.edit_tools .el-button {
  margin: 0;
  padding-left: 0;
  color: #707070;
}

.my-divider {
  width: 3px;
  background-color: rgb(179, 208, 211);
  box-shadow: -5px 0 60px #000000;
  height: 100%;
}

.my-divider:hover {
  background-color: rgb(0, 238, 255);
  cursor: col-resize;
}

.el-container {
  width: 100%;
  height: 100%;
}

:deep(.el-select .el-input__wrapper) {
  background-color: transparent;
  box-shadow: none !important;
}

.el-popper {
  width: auto !important;
}

.el-textarea {
  width: 100%;
  height: 100%;
}

.ai_scope_main .el-card {
  border-radius: 15px;
  margin: 15px;
  /* background: rgb(242, 242, 242); */
}

.ai_scope_main .el-card:hover {
  background: rgb(242, 242, 242);
}

:deep(.el-textarea .el-textarea__inner) {
  width: 100%;
  height: 100% !important;
  background: transparent;
  box-shadow: none !important;
  padding-left: 20px;
  padding-right: 20px;
  font-family: '方正幼圆';
  font-size: larger;
  font-weight: normal;
  color: #000000;
  overflow: auto;
}

.el-avatar {
  background-color: transparent;
}

/* 去除选中时蓝色边框（下面两个都要加上） */
/* :deep(.el-input .el-input__wrapper.is-focus) {
  box-shadow: none !important;
} */
</style>
